import React, {Component} from "react";
import {connect} from "react-redux";
import {messages} from "share/common";
import AdvancedTable from "components/advanced-table";
import {Button, message, Popconfirm, Tooltip} from "antd";
import "styles/financial-management/invoice-management-platform.scss";
import "styles/financial-management/meiya-account-period/meiya-account-period-importer.scss";
import meiYaAccountPeriodService from "./meiya-account-period.service";
import config from "config";
import MeiyaAccountPeriodImporter from "./meiya-account-period-importer";

class MeiYaAccountPeriod extends Component {
  advancedTableRef = null;

  state = {
    showImportFrame: false,
    loading: false,
    loadingInvoice: null,
    showEditInvoiceFlag: false,
    showViewInvoiceFlag: false,
    nowInvoice: null,
    currencyList: [],
    exportDisabled: true,
  };
  searchForm = [
    {
      id: "accountPeriod",
      label: messages("financial-management.key1258") /*选择账期*/,
      component: "MonthPicker",
      parser: (value) => ({accountPeriod: value ? value.format("YYYY-MM") : null})
    },
  ];

  componentDidMount() {
    this.setState({gettingTitle: true, loading: true});
  }

  renderOperationColumns = (_, record) => {
    const {accountPeriod, confirm} = record
    let viewOperation = (
      <a onClick={() => this.handleClickPeriod(accountPeriod)}>
        {messages("common.view") /*查看*/}
      </a>
    );
    return <span>
      {/*{viewOperation}*/}
      {/*{!confirm && <span className="ant-divider"/>}*/}
      {!confirm && <Popconfirm
        title={
          messages("financial-management.key1265") /*你是否确认归档吗？*/
        }
        onConfirm={() => this.handleConfirmPeriod(accountPeriod)}
      >
        <a href="#">{messages("financial-management.key1263") /*归档账期*/}</a>
      </Popconfirm>
      }
      {!confirm && <span className="ant-divider"/>}
      {!confirm && <Popconfirm
        title={
          messages("financial-management.key1266") /*你是否确认删除吗？*/
        }
        onConfirm={() => this.handleDeletePeriod(accountPeriod)}
      >
        <a href="#">{messages("financial-management.key1264") /*删除账期*/}</a>
      </Popconfirm>
      }
      </span>
      ;
  };

  columns = [
    {
      dataIndex: "confirm",
      title: messages("financial-management.key1259") /*是否确认*/,
      render: (text) => (
        <Tooltip title={text} placement="topLeft">
          {text ? "已归档" : "未归档"}
        </Tooltip>
      ),
    },
    {
      dataIndex: "accountPeriod",
      title: messages("financial-management.key1260") /*导入账期*/,
      render: (text) => (
        <Tooltip title={text} placement="topLeft">
          {text || "-"}
        </Tooltip>
      ),
    },
    {
      dataIndex: "createDate",
      title: messages("financial-management.key1261") /*创建日期*/,
      render: (text) => (
        <Tooltip title={text} placement="topLeft">
          {text || "-"}
        </Tooltip>
      ),
    },
    {
      dataIndex: "count",
      title: messages("financial-management.key1262") /*导入数量*/,
      render: (text) => (
        <Tooltip title={text} placement="topLeft">
          {text || "-"}
        </Tooltip>
      ),
    },
    {
      dataIndex: "id",
      title: messages("financial-management.key254") /*操作*/,
      render: this.renderOperationColumns,
    },
  ];

  service = (page, size, searchParams) => {
    return meiYaAccountPeriodService.getMeiYaAccountPeriodListGroup(page, size, searchParams);
  };

  showImport = (flag) => {
    this.setState({showImportFrame: flag})
  };

  handleImportOk = () => {
    this.showImport(false)
    message.success(messages("financial-management.key1268")/*"导入数据已解析成功，导入结果已自动下载！"*/)
    this.advancedTableRef.advancedSearchRef.search();
  }

  handleConfirmPeriod = (accountPeriod) => {
    meiYaAccountPeriodService.confirmByAccountPeriod(accountPeriod).then(res => {
      message.success(messages("financial-management.key1269")/*"操作成功！"*/)
      this.advancedTableRef.advancedSearchRef.search();
    })
  }

  handleDeletePeriod = (accountPeriod) => {
    meiYaAccountPeriodService.deleteMeiYaAccountPeriodBy(accountPeriod).then(res => {
      message.success(messages("financial-management.key1269")/*"操作成功！"*/)
      this.advancedTableRef.advancedSearchRef.search();
    })
  }

  handleClickPeriod = (accountPeriod) => {

  }

  render() {
    const {
      showImportFrame
    } = this.state;
    return (
      <div className="full-height-page invoice-management-platform">
        <MeiyaAccountPeriodImporter
          visible={showImportFrame}
          title={messages('financial-management.key1253'/*美亚机票账期数据导入*/)}
          templateUrl={`${config.baseUrl}/api/meiya/acount/period/export/template`}
          uploadUrl={`${config.baseUrl}/api/meiya/acount/period/import`}
          fileName={messages('financial-management.key1254'/*美亚机票账期数据导入模板*/)}
          onOk={this.handleImportOk}
          afterClose={() => this.showImport(false)}
        />
        <Button
          className={"meiya-account-period-import-btn"}
          onClick={() => this.showImport(true)}>{messages('financial-management.key1267')/*导入美亚账期数据*/}</Button>
        <AdvancedTable
          index
          columns={this.columns}
          onRef={(ref) => (this.advancedTableRef = ref)}
          title={messages("financial-management.key1252") /*美亚机票账期*/}
          searchForm={this.searchForm}
          service={this.service}
          expandAll
          onGetData={(data, pagination) =>
            this.setState({exportDisabled: pagination.total === 0})
          }
          rowKey="accountPeriod"
          footer={
            <span className="button-area">
            </span>
          }
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
    profile: state.login.profile,
  };
}

export default connect(mapStateToProps)(MeiYaAccountPeriod);
